<template>
  <div class="files">
    <el-form :inline="true">
      <!-- 			<el-form-item>
				<el-button-group>
					<el-button type="primary" icon="el-icon-delete" @click="deleteTele" plain>删除</el-button>
				</el-button-group>
			</el-form-item> -->
      <el-button type="primary" @click="addTele">新建</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">发送邮件</el-button>
      <div class="right-items" style="float: right">
        <el-button type="primary">搜索</el-button>
      </div>
      <el-form-item class="search">
        <el-input v-model="search" placeholder="输入关键字搜索"></el-input>
      </el-form-item>
    </el-form>

    <el-table
      :data="
        files.list.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      @select="handlerSelectedRow"
      border
      ref="multipleTable"
      style="width: 100%"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column label="姓名" align="center" prop="name" width="150">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码"
        align="center"
        width="200"
      />
      <el-table-column
        prop="email"
        label="电子邮件"
        align="center"
        width="250"
      />
      <el-table-column prop="depart" label="部门" align="center" width="137" />
      <el-table-column
        prop="tele_type"
        label="类型"
        align="center"
        width="137"
      />
      <el-table-column prop="company" label="公司" align="center" width="150" />

      <el-table-column label="操作" align="center" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="renameFile(scope.row)">修改</el-button>
          <el-button size="mini" @click="deleteTele(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input type="text" v-model="form.phone" placeholder="电话号码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="form.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="部门" prop="depart">
          <el-input type="text" v-model="form.depart" placeholder="部门" />
        </el-form-item>
        <el-form-item label="类型" prop="tele_type">
          <el-input type="text" v-model="form.tele_type" placeholder="类型" />
        </el-form-item>
        <el-form-item label="公司" prop="company">
          <el-input type="text" v-model="form.company" placeholder="公司" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="onSubmit(form)">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteTele,
  renameFile,
  getTelesDepart,
  addDepartTele,
} from "../../utils/api";
import { mapState } from "vuex";
//import axios from "axios";

export default {
  name: "Files",
  data() {
    return {
      form: {
        name: "",
        phone: "",
        email: "",
        depart: "",
        tele_type: "",
        company: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: " ",
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          name: "王小虎",
          phone: "122",
          email: "124",
          depart: "424",
          tele_type: "53",
          company: "535",
        },
      ],

      teles: {},
      files: {
        list: [],
      },
      dialogVisible: false,
      search: "",
      history: [],
      current: [1],
      selection: [],
      path: [" / 根目录"],
      //添加通讯录
    };
  },
  created() {
    this.getTeles();
  },
  computed: {
    currentPath() {
      return this.path.join(" / ");
    },
    parentId() {
      return this.current[this.current.length - 1];
    },
    ...mapState(["auth"]),
  },
  methods: {
    getTeles() {
      window.console.log("进入getTeles");
      getTelesDepart(88).then((response) => {
        if (response && response.status === "success") {
          this.teles = response.data;
          this.files.list = response.data.list;
        }
      });
    },
    //新建
    addTele() {
      (this.dialogVisible = true), (this.title = "新建通讯信息");
      this.form.name = " ";
      this.form.phone = " ";
      this.form.email = " ";
      this.form.depart = " ";
      this.form.tele_type = " ";
      this.form.company = " ";
    },
    saveData() {
      var title = this.title;
      var name = this.form.name;
      var phone = this.form.phone;
      var email = this.form.email;
      var depart = this.form.depart;
      var tele_type = this.form.tele_type;
      var company = this.form.company;
      // this.tableData.push(name)
      // this.dialogVisible = false
      if (title == "新建通讯信息") {
        this.tableData.push({
          name,
          phone,
          email,
          depart,
          tele_type,
          company,
        });
        this.dialogVisible = false;
      }
    },

    //添加通讯录
    onSubmit(form) {
      addDepartTele(form).then((response) => {
        if (response && response.status === "success") {
          this.$message.success(response.message);
          this.getTeles();
        }
        this.getTeles();
      });
    },
    renameFile(row) {
      this.$prompt("请输入新文件名", "重命名", {
        inputValue: row.name,
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: "文件名应为1-20个字符",
      })
        .then(({ value }) => {
          var newName = value;
          var id = row.id;
          row.name = value;
          renameFile({
            id,
            newName,
          }).then((response) => {
            if (response && response.status === "success") {
              this.$message.success(response.message);
            }
          });
        })
        .catch(() => {});
    },
    //删除通讯录

    deleteTele() {
      this.$confirm("永久删除这个用户, 是否继续?")
        .then(() => {
          if (this.$refs.multipleTable.selection < 1) {
            this.$message.error("至少选择一个用户！");
          } else {
            var ids = [];
            this.$refs.multipleTable.selection.forEach((item) => {
              ids.push(item.id);
            });
            deleteTele(ids).then((response) => {
              if (response && response.status === "success") {
                this.$message.success(response.message);
              }
            });
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
};
</script>

<style scoped>
.path {
  float: right;
}

.search {
  float: right;
}
</style>
